<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-事件绑定</title>
<!--    导入vue的库文件 在 window 全局就有了 Vue 这个构造函数-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<!--    希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
<div id="app">
    <p>count 的值是：{{ count }}</p>
<!--    在绑定事件处理函数的时候，可以使用（）传递参数-->
    <button @click="add(2)">点击+2</button>
    <button @click="sub">点击-1</button>
</div>

<script>
    //创建vue的实例对象
    const vm = new Vue({
    // el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el:'#app',
        // data 对象就是要渲染到页面上的数据
        data:{
            count:0,
        },
        //methods 的作用，就是定义事件的处理函数
        methods:{
         // add:function (){
         //     console.log('ok')
         //    this.count++;
         // }

         //ES6 将上面的方法简写
            add(n){
                // vm.count+=1;  //vm对象的count属性+=1
                this.count+=n; //this=vm 当前对象
            },
            sub(){
                this.count--;
            },
        }
    });
</script>
</body>
</html>